.topicDetail{
  width: 100%;
  overflow-x: hidden;
}
.commentWrap{
  width: 100%;
  height: auto;
  background: white;
  margin-top: .2rem;
  .titleLine{
    width: 100%;
    height: 1rem;
    position: relative;
    display: flex;
    padding: 0 .2rem;
    &:after{
      content: '';
      width: 200%;
      height: 1px;
      position: absolute;
      bottom: 0;
      transform: scale(0.5);
      transform-origin: 0;
      background-color: gray;
    }
    div.titleName{
      flex: 1;
      height: 100%;
      line-height: 1rem;
      font-size: .3rem;
    }
    div.titleIcon{
      width: 1rem;
      height: auto;
      line-height: 1rem;
      text-align: right;
      font-size: .4rem;
    }
  }
  .noComment{
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .noCommentIcon{
      width: 2.2rem;
      height: auto;
      img{
        width: 100%;
        padding: .2rem;
      }
      div{
        color: gray;
        font-size: .3rem;
        padding: 0 .2rem;
        text-align: center;
      }
    }
  }
  .moreComment{
    line-height: .8rem;
    text-align: center;
    display: block;
  }
}

.relateTopic{
  margin-top: .2rem;
  padding: 0 .2rem;
  .relateTopicTitle{
    line-height: .8rem;
    text-align: center;
  }
  .relateTopicItem{
    background: white;
    padding: .2rem .2rem 0 .2rem;
    margin-bottom: .2rem;
    display: block;
    img{
      width: 100%;
      height: 4rem;
    }
    div{
      line-height: 1rem;
      color: gray;
      font-size: .28rem;
    }
  }
}
